<div class="main-container">
  <div class="row-fluid">
    <div class="span12">
      <div class="furatto-block">
        <div class="furatto-large-header">
          <div class="furatto-large-container">
            <h1 class="large-header">Grid</h1>
            <p class="motto">
            A twelve column grid
            </p>
            <hr/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-center">
    <div class="furatto-block">
      <h3 class="light">Grid Layout</h3>
      <p>Furatto comes with a 12-column grid based on the one from <a href="http://twitter.github.io/bootstrap/scaffolding.html#gridSystem">Bootstrap</a>. Below 767px viewports, the columns become fluid and stack vertically.</p>
      <div class="grid-demo">
        <div class="row-fluid">
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span1">
            1
          </div>
          <div class="span1">
            1 
          </div>
        </div>
      </div>
      <div class="grid-demo">
        <div class="row-fluid">
          <div class="span2">
            2 
          </div>
          <div class="span4">
            4 
          </div>
          <div class="span1">
            1 
          </div>
          <div class="span3">
            3 
          </div>
          <div class="span2">
            2 
          </div>
        </div>
      </div>
      <div class="grid-demo">
        <div class="row-fluid">
          <div class="span4">
            4 
          </div>
          <div class="span8">
            8
          </div>
        </div>
      </div>
      <div class="grid-demo">
        <div class="row-fluid">
          <div class="span6">
            6 
          </div>
          <div class="span6">
            6
          </div>
        </div>
      </div>
      <h3 class="light">Grid HTML</h3>
      <p>For a simple three column layout just add the <span class="code html">.row-fluid</span> class name and add the correct number of <span class="code html">.span*</span> columns. The span class name for the columns comes from the 1 to the 12 as is a 12 column grid.</p>
      <pre data-language="html">
        <code>
          <div class="row-fluid">
             <div class="span4">...</div>
             <div class="span4">...</div>
             <div class="span4">...</div>
          </div>
        </code>
      </pre>
      <p>Given the last example the three div elements with <span class="code html">.span</span> class name make a total of 12.</p>
    </div>
    <div class="furatto-block">
      <h3 class="light">Nesting columns</h3>
      <p>When comes to nesting Furatto helps you add multiple span class elements. You just have to add a <span class="code html">.row-fluid</span> class into an existing <span class="code html">.span*</span> column. The nested rows should also match a 12, you can see it as if is another <span class="code html">.row-fluid</span> element.</p>
      <div class="nested-grid-demo">
        <div class="row-fluid">
          <div class="span9">
            <p>I'm a span9 class column</p>
            <div class="row-fluid">
              <div class="span6">
                I'm a span6 column 
              </div>
              <div class="span6">
                I'm a span6 column 
              </div>
            </div>
          </div>
          <div class="span3 text-center">
            <p>I'm a span3 class column</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

